<template>
	<div class="app-color-span">
		<span v-if="color" :style="{ color: color }">{{
			text ? text : '---'
		}}</span>
		<template v-else>
			<template v-if="dataValue && dataValue.length > 0">
				<span
					v-for="(textItem, index) of dataValue"
					:key="index"
					class="app-color-span__item"
					:style="{
						backgroundColor: textItem.color,
						borderColor: textItem.color,
					}"
				>
					{{ textItem.srfmajortext ? textItem.srfmajortext : '---' }}
				</span>
			</template>
			<span v-else>---</span>
		</template>
	</div>
</template>
<script lang="ts" setup>
import { useEditorTypeParams } from '@/hooks/use-editor';
import { Ref } from 'vue';
import { colorSpanProps } from './color-span';
const props = defineProps(colorSpanProps);
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
const text = ref('');
const dataValue: Ref<any[]> = ref([]);
onBeforeMount(() => {
	load();
});
watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		if (newVal !== oldVal) {
			load();
		}
	}
);

let color = computed(() => {
	return props.data[props.color];
});

const load = () => {
	if (props.color) {
		text.value = props.value as string;
	} else {
		if (props.value) {
			dataValue.value = JSON.parse(props.value);
		}
	}
};
</script>
